---
sidebar_position: 1
---

# Place

Changing the placement for the ReactTooltip component.

import { useState } from 'react';
import { Tooltip } from 'react-tooltip'

export const TooltipAnchor = ({ children, id, ...rest }) => {
  return (
    <span
      id={id}
      style={{
        display: 'flex',
        justifyContent: 'center',
        margin: 'auto',
        alignItems: 'center',
        width: '60px',
        height: '60px',
        borderRadius: '60px',
        color: '#222',
        background: 'rgba(255, 255, 255, 1)',
        cursor: 'pointer',
        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
        border: '1px solid #333',
      }}
      {...rest}
    >
      {children}
    </span>
  )
}

The `place` prop and the `data-tooltip-place` attribute accept the following values: `'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'`.

### Using `data-tooltip-place` attribute

```jsx
import { Tooltip } from 'react-tooltip';
const PLACES = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']

<a id="my-tooltip-anchor">◕‿‿◕</a>
{PLACES.map(place => (
  <Tooltip
    key={place}
    anchorSelect="#my-tooltip-anchor"
    content={`Hello world from the ${place}!`}
    place={place}
  />
))}
```

export const PlacementExampleAttributes = () => {
  const PLACES1 = ['top', 'right', 'bottom', 'left'];
  const PLACES2 = ['top-start', 'right-start', 'bottom-start', 'left-start'];
  const PLACES3 = ['top-end', 'right-end', 'bottom-end', 'left-end'];
  
  return (
    <>
      <div style={{display: 'flex', gap: '16px'}}>
      <TooltipAnchor id="my-tooltip-anchor1">◕‿‿◕</TooltipAnchor>
      <TooltipAnchor id="my-tooltip-anchor2">◕‿‿◕</TooltipAnchor>
      <TooltipAnchor id="my-tooltip-anchor3">◕‿‿◕</TooltipAnchor>
      </div>
      <div>
      {PLACES1.map(place => (
        <Tooltip
          key={place}
          anchorSelect="#my-tooltip-anchor1"
          content={`Hello world from the ${place}!`}
          place={place}
        />
      ))}
      {PLACES2.map(place => (
        <Tooltip
          key={place}
          anchorSelect="#my-tooltip-anchor2"
          content={`Hello world from the ${place}!`}
          place={place}
        />
      ))}
      {PLACES3.map(place => (
        <Tooltip
          key={place}
          anchorSelect="#my-tooltip-anchor3"
          content={`Hello world from the ${place}!`}
          place={place}
        />
      ))}
      </div>
    </>
  )
}

<PlacementExampleAttributes />



### Using `place` prop

```jsx
import { Tooltip } from 'react-tooltip';

const PLACES = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']
const [place, setPlace] = useState(0)

<a 
  data-tooltip-id="my-tooltip"
  onClick={() => setPlace(p => (p + 1) % 12)}
>
  ◕‿‿◕
</a>
<Tooltip
  id="my-tooltip"
  content={`I'm on the ${PLACES[place]}`}
  place={PLACES[place]}
/>
```

export const PlacementExample = () => {
  const PLACES = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'];
  const [place, setPlace] = useState(0)
  
  return (
    <>
      <TooltipAnchor
        data-tooltip-id="my-tooltip"
        onClick={() => setPlace(p => (p + 1) % 12)}
      >
        ◕‿‿◕
      </TooltipAnchor>
      <Tooltip
        id="my-tooltip"
        content={`I'm on the ${PLACES[place]}`}
        place={PLACES[place]}
      />
    </>
  )
}

<PlacementExample />
